<template>
  <div class="admin-orders">
    <!-- 搜索和筛选区域 -->
    <div class="filter-container">
      <el-form :inline="true" :model="filterForm">
        <el-form-item label="订单号">
          <el-input v-model="filterForm.orderNo" placeholder="请输入订单号" clearable />
        </el-form-item>
        <el-form-item label="用户ID">
          <el-input v-model="filterForm.userId" placeholder="请输入用户ID" clearable />
        </el-form-item>
        <el-form-item label="订单状态">
          <el-select v-model="filterForm.status" placeholder="请选择状态" clearable>
            <el-option
              v-for="item in statusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 订单表格 -->
    <el-table
      :data="tableData"
      border
      style="width: 100%"
      v-loading="loading"
    >
      <el-table-column prop="orderNo" label="订单号" width="180" />
      <el-table-column prop="userId" label="用户ID" width="100" />
      <el-table-column prop="totalAmount" label="总金额" width="120" />
      <el-table-column prop="status" label="状态" width="120">
        <template #default="{ row }">
          <el-tag :type="getStatusTagType(row.status)">
            {{ getStatusText(row.status) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="180" />
      <el-table-column label="操作" width="180" fixed="right">
        <template #default="{ row }">
          <el-button size="small" @click="handleDetail(row)">详情</el-button>
          <el-button
            size="small"
            type="danger"
            @click="handleCancel(row)"
            v-if="row.status === 1"
          >
            取消
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        v-model:current-page="pagination.currentPage"
        v-model:page-size="pagination.pageSize"
        :page-sizes="[10, 20, 30, 50]"
        :total="pagination.total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// 订单状态选项
const statusOptions = [
  { value: 1, label: '待支付' },
  { value: 2, label: '已支付' },
  { value: 3, label: '已发货' },
  { value: 4, label: '已完成' },
  { value: 5, label: '已取消' }
]

// 筛选表单
const filterForm = reactive({
  orderNo: '',
  userId: '',
  status: ''
})

// 表格数据
const tableData = ref([])
const loading = ref(false)

// 分页配置
const pagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0
})

// 获取订单列表
const fetchOrders = async () => {
  try {
    loading.value = true
    // 这里替换为实际的API调用
    // const res = await getOrders({
    //   ...filterForm,
    //   page: pagination.currentPage,
    //   size: pagination.pageSize
    // })
    // tableData.value = res.data.list
    // pagination.total = res.data.total
    
    // 模拟数据
    tableData.value = [
      {
        orderNo: 'NO20230001',
        userId: '1001',
        totalAmount: '199.00',
        status: 1,
        createTime: '2023-01-01 10:00:00'
      },
      {
        orderNo: 'NO20230002',
        userId: '1002',
        totalAmount: '299.00',
        status: 2,
        createTime: '2023-01-02 11:00:00'
      }
    ]
    pagination.total = 20
  } catch (error) {
    ElMessage.error('获取订单列表失败')
  } finally {
    loading.value = false
  }
}

// 搜索
const handleSearch = () => {
  pagination.currentPage = 1
  fetchOrders()
}

// 重置搜索
const resetSearch = () => {
  Object.keys(filterForm).forEach(key => {
    filterForm[key] = ''
  })
  handleSearch()
}

// 分页大小变化
const handleSizeChange = (val) => {
  pagination.pageSize = val
  fetchOrders()
}

// 当前页变化
const handleCurrentChange = (val) => {
  pagination.currentPage = val
  fetchOrders()
}

// 获取状态标签类型
const getStatusTagType = (status) => {
  const map = {
    1: 'warning',  // 待支付
    2: '',         // 已支付
    3: 'info',     // 已发货
    4: 'success',  // 已完成
    5: 'danger'    // 已取消
  }
  return map[status] || ''
}

// 获取状态文本
const getStatusText = (status) => {
  const option = statusOptions.find(item => item.value === status)
  return option ? option.label : '未知状态'
}

// 查看详情
const handleDetail = (row) => {
  // 这里可以跳转到详情页或打开对话框
  console.log('查看订单详情', row)
}

// 取消订单
const handleCancel = (row) => {
  ElMessageBox.confirm('确定要取消此订单吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    // 这里调用取消订单的API
    // await cancelOrder(row.orderNo)
    ElMessage.success('订单已取消')
    fetchOrders()
  }).catch(() => {})
}

// 初始化加载
onMounted(() => {
  fetchOrders()
})
</script>

<style scoped>
.filter-container {
  margin-bottom: 20px;
}
.pagination {
  margin-top: 20px;
  text-align: right;
}
</style>